<nav class="items-center bg-teal-blue-500 flex-wrap border container">
	<div class="flex justify-between">
		<a href="/" class="w-full md:w-1/5 flex items-center border-r py-5 px-5 md:px-8">
			<img class="mr-3 md:mr-8 h-8 md:h-12" src="/assets/panoptic/images/panoptic.svg">
			<div class="lg:hidden">Panoptic Tracker</div>
			<div class="hidden lg:block">Panoptic<br>Tracker</div>
		</a>
		<div class="top-navbar md:w-4/5 justify-end flex text-orange-500 font-medium px-5" id="navigation">
			<div class="hidden lg:flex flex-row self-center items-start">
				<a href="/" class="nav-link {{ 'active' if pathname=='index' else '' }}">
					<span>Tracker</span>
				</a>
				<a href="/report-frt" class="nav-link {{ 'active' if pathname=='report-frt' else '' }}">
					<span>Report an FRT System</span>
				</a>
				<a href="/sign-the-petition" class="nav-link {{ 'active' if pathname=='sign-the-petition' else '' }}">
					<span>Sign the Petition</span>
				</a>
				<a href="/column" class="nav-link {{ 'active' if pathname=='column' else '' }}">
					<span>Panoptic Column</span>
				</a>
				<a href="/right-to-information" class="nav-link {{ 'active' if pathname=='right-to-information' else '' }}">
					<span>RTIs</span>
				</a>
				<a href="/research" class="nav-link {{ 'active' if pathname=='research' else '' }}">
					<span>Research</span>
				</a>
				<a href="/about" class="nav-link {{ 'active' if pathname=='about' else '' }}">
					<span>About</span>
				</a>
				<a href="/donate" class="nav-link {{ 'active' if pathname=='donate' else '' }}">
					<span>Donate</span>
				</a>
			</div>
			<div class="lg:hidden flex items-center p-2" onclick="toggleMenu()">
				<svg id="menu-open" xmlns="http://www.w3.org/2000/svg" fill="none" class="h-8 w-8" viewBox="0 0 24 24"
					stroke="currentColor">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
				</svg>
				<svg id="menu-close" xmlns="http://www.w3.org/2000/svg" fill="none" class="h-8 w-8 hidden"
					viewBox="0 0 24 24" stroke="currentColor">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
				</svg>
			</div>
		</div>
	</div>
	<div class="hidden lg:hidden flex flex-col border-t p-5" id="mobile-menu">
		<a href="/" class="nav-link px-0 {{ 'active' if pathname=='index' else '' }}">
			<span>Tracker</span>
		</a>
		<a href="/report-frt" class="nav-link px-0 {{ 'active' if pathname=='report-frt' else '' }}">
			<span>Report an FRT System</span>
		</a>
		<a href="/sign-the-petition" class="nav-link px-0 {{ 'active' if pathname=='sign-the-petition' else '' }}">
			<span>Sign the Petition</span>
		</a>
		<a href="/column" class="nav-link px-0 {{ 'active' if pathname=='column' else '' }}">
			<span>Panoptic Column</span>
		</a>
		<a href="/right-to-information" class="nav-link px-0 {{ 'active' if pathname=='right-to-information' else '' }}">
			<span>RTIs</span>
		</a>
		<a href="/research" class="nav-link px-0 {{ 'active' if pathname=='research' else '' }}">
			<span>Research</span>
		</a>
		<a href="/donate" class="nav-link px-0 {{ 'active' if pathname=='donate' else '' }}">
			<span>Donate</span>
		</a>
	</div>
</nav>
<script>
	let closed = true;
	const open = document.getElementById('menu-open');
	const close = document.getElementById('menu-close');
	const menu = document.getElementById('mobile-menu');

	function toggleMenu() {
		if (closed) {
			open.classList.add('hidden');
			menu.classList.remove('hidden');
			close.classList.remove('hidden');
			closed = false;
		} else {
			open.classList.remove('hidden');
			menu.classList.add('hidden');
			close.classList.add('hidden');
			closed = true;
		}
	}
</script>
